<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside
        class="aside scroll-container"
        :style="{ width: `${isCollapse ? 65 : 240}px`, transition: '0.4s' }"
      >
        <el-menu
        style="border-right:none"
        unique-opened
          router
          :default-active="$route.path"
          background-color="#7C0B01"
          text-color="#bbb"
          active-text-color='#fff'
          :style="{ height: '100vh' }"
          :collapse="isCollapse"
          class="el-menu-vertical-demo"
        >
          <el-menu-item>
            <img width="30px" src="../assets/flower.svg" alt="" />
            <template slot="title">
              <span style="font-size: 1.2em; color: #efefef; font-weight: bold"
                >&nbsp;&nbsp;花友日记后台管理系统</span
              >
            </template>
          </el-menu-item>
          <el-menu-item index="/home/index">
            <i class="el-icon-message"></i>
            <template slot="title"> 首页 </template>
          </el-menu-item>
          <el-submenu index="mall">
            <template slot="title">
              <i class="el-icon-s-shop"></i>
              <span slot="title">花卉商城</span>
            </template>
            <el-menu-item index="/home/flower-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">鲜花列表</span>
            </el-menu-item>
            <el-menu-item index="/home/flower-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增鲜花</span>
            </el-menu-item>
            <el-menu-item index="/home/mall-order-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">订单列表</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="square">
            <template slot="title">
              <i class="el-icon-office-building"></i>
              <span slot="title">花卉广场</span>
            </template>
            <el-menu-item index="/home/square-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">分享列表</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="encyclopedias">
            <template slot="title">
              <i class="el-icon-reading"></i>
              <span slot="title">花卉百科</span>
            </template>
            <el-menu-item index="/home/encyclopedias-list">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">百科列表</span>
            </el-menu-item>
            <el-menu-item index="/home/encyclopedias-add">
              <i class="el-icon-plus"></i>
              <span slot="title">添加花卉</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="user">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="/home/userlist">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">用户列表</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i
            v-show="!isCollapse"
            class="el-icon-s-fold"
            @click="isCollapse = true"
          ></i>
          <i
            v-show="isCollapse"
            class="el-icon-s-unfold"
            @click="isCollapse = false"
          ></i>

          <!-- 面包屑导航 
               根据当前路由所在位置，自动生成面包屑导航 例如：
               路由：/home/actor-list     演员管理 / 演员列表
               路由：/home/actor-add      演员管理 / 新增演员
               路由：/home/movie-update   电影管理 / 电影列表 / 修改电影
               ......
          -->
          <el-breadcrumb style="flex: 1; margin-left: 20px" separator="/">
            <el-breadcrumb-item
              v-for="item in $route.meta.breadcrumbs"
              :key="item"
            >
              {{ item }}
            </el-breadcrumb-item>
          </el-breadcrumb>

          <div v-if="user">
            <span><img :src="user.avatar" style="width:30px"></span>&nbsp;&nbsp;
            <span>用户：{{ user.name }}</span> &nbsp;
          </div>
        </el-header>

        <el-main>
          <!-- 二级路由的占位符 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      isCollapse: false,
    };
  },

  computed: {
    // 下述写法与user计算属性原理一致
    ...mapState(["user"]),
    // user(){  // 该计算属性直接返回state对象中的user对象
    //   return this.$store.state.user
    // }
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
  }
}
.aside::-webkit-scrollbar {
  display: none;
}
element.style {
  background-color: #fff !important;
  background-image: url(@/assets/bg0.png) !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
</style>
